<template>
	<view class="spread" :class="{'box-spread': showFlag}">
		<view class="spread-item flex flex-col items-center" v-for="item in PositionDictionary" :key="item.label"
			:style="item.style">
			<text class="spread-up" :style="{opacity: item.hideUD ? 0 : 1}">{{item.up}}</text>
			<template v-if="isAch == 1">
				<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
				<image :src="item.back" mode="widthFix" v-else></image>
			</template>
			<template v-else>
				<image src="@/static/tarot-bg.png" mode="widthFix"></image>
				<text class="spread-name">{{item.name}}</text>
			</template>
			<text class="spread-label flex justify-center" :style="{opacity: item.hideUD ? 0 : 1}">{{item.label}}</text>
		</view>
		<text class="content-label">阳</text>
		<text class="content-label">阴</text>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const PositionDictionary = ref([{
			up: "空",
			name: "切牌",
			label: "空",
			hideUD: true,
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(-50%, -50%)"
			}
		},
		{
			up: "巽",
			name: "东南",
			label: "杜",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% - 100% - 20rpx), calc(-50% - 100% + 110rpx))"
			}
		},
		{
			up: "艮",
			name: "东北",
			label: "生",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% - 100% - 20rpx), calc(-50% + 100% - 110rpx))"
			}
		},
		{
			up: "震",
			name: "东",
			label: "伤",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% - 200% - 40rpx), -50%)"
			}
		},
		{
			up: "坤",
			name: "西南",
			label: "死",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% + 100% + 20rpx), calc(-50% - 100% + 110rpx))"
			}
		},
		{
			up: "乾",
			name: "西北",
			label: "开",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% + 100% + 20rpx), calc(-50% + 100% - 110rpx))"
			}
		},
		{
			up: "兑",
			name: "西",
			label: "惊",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% + 200% + 40rpx), -50%)"
			}
		},
		{
			up: "离",
			name: "南",
			label: "景",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(-50%, calc(-50% - 90%))"
			}
		},
		{
			up: "坎",
			name: "北",
			label: "休",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(-50%, calc(-50% + 90%))"
			}
		},
	])
	onMounted(() => {
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		PositionDictionary.value.map((item, idx) => {
			item.dir = cardList.value[idx].dir
			item.front = cardList.value[idx].tarot.front
			item.back = cardList.value[idx].tarot.back
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		height: 700rpx;
	}

	.content-label {
		font-size: 26rpx;
		color: orange;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(-100%, calc(-50% - 300rpx));
	}

	.content-label:nth-last-child(1) {
		transform: translate(-100%, calc(-50% + 300rpx));
	}
</style>